<template>
  <div class="good-tenant">
    <div class="bg"></div>
    <div class="top">
      <h3>租客详情</h3>
     <img src="../../assets/icon/向左返回.svg"  class="img" @click="goback" />
    </div>
    <div>
      <section class="tenant-message">
        <img :src="re.portrait" alt="" />
        <div class="tt-message">
          <div class="sir">
            <strong>{{ re.name }}</strong>
            |
            <span class="bg1">{{ re.methods }}</span>
            <span class="bg2">{{ re.age }}岁</span>
          </div>
          <p class="p1">预计租期:{{ re.term }}</p>
          <p class="p2">期望入住时间:{{ re.date }}</p>
        </div>
      </section>

      <div class="choie">
        <ul>
          <li>
            <p>意向区域</p>
            <span>{{ re.city }}</span>
          </li>
          <li>
            <p>租金范围</p>
            <span>{{ re.rent }}/月</span>
          </li>
        </ul>
      </div>
    </div>
    <van-button type="primary" block color="#6D9DF1" class="btn">去 聊 聊</van-button>
  </div>
</template>
<script>
import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);
export default {
  data() {
    return {
      re: [],
      id: null,
    };
  },
  methods:{
   goback(){
            this.$router.go(-1)
        }
  },
  mounted() {
    let url = "data/home.json";
    let pro = axios.get(url);
    pro.then((res) => {
      let r = res.data.result;
      r.forEach((e) => {
        if (this.id.id == e.id) {
          this.re = e;
        }
      });
    }),
      pro.catch((err) => {
        console.log(err);
      });
  },
  created() {
    this.id = this.$route.query;
    // console.log(this.id);
  },
};
</script>
<style lang="scss" scoped>
//优选租客
.good-tenant {
  width: 90%;
  font-size: 14px;
position: relative;
margin: 0 auto;
  // .bg{
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  //   width: 110%;
  //   height: 150px;
  //   background-color: #f1cc93;
  //   margin-left: -5%;
  //   border-bottom-left-radius: 25px;
  //    border-bottom-right-radius: 25px;
  //   //  margin: 0;
  //   padding: 0;
  //   margin-top: 0;
  // }
  .top {
    width: 100%;
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
    position: relative;
    img{
      position: absolute;
      width: 20px;
      left: 1px;
      top: 5px;
    }
    
   
  }
  .tenant-message {
    // display: flex;
    margin-top: 20px;
    position: relative;
    img {
      width: 110px;
      height: 95px;
      border-radius: 50%;
      margin-left: 33%;
    }
    .image {
      position: absolute;
      right: 0;
      top: 20px;
      width: 20px;
      height: 20px;
    }
    .tt-message {
      margin-left: 28%;
      font-size: 20px;
      margin-top: 30px;

      p {
        // padding: .5px;
        margin: 5px;
        color: gray;
      }
      .sir {
        display: flex;

        strong {
          margin-right: 8px;
        }
        .bg1 {
          display: block;
          width: 45px;
          text-align: center;
          background-color: #4783f7;
          color: rgb(243, 239, 239);
          margin-left: 8px;
          font-size: 12px;
          height: 30px;
          line-height: 30px;
        }
        .bg2 {
          width: 35px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          padding: 1px;
          box-sizing: border-box;
          background-color: rgb(236, 230, 230);
          margin-left: 5px;
          font-size: 12px;
        }
      }
      .p2 {
        margin-top: 10px;
        margin-left: -15%;
      }
       .p1 {
        margin-top: 10px;
        // margin-left: -15%;
      }
    }
  }
  .choie {
    margin-top: 20px;
    font-size: 16px;
    ul {
      display: flex;
      justify-content: space-between;
      li:nth-child(1) {
        border-right: 1px solid rgb(240, 233, 233);
        padding-right: 5px;
      }
      li {
        width: 50%;
        text-align: center;
        border-bottom: 1px solid rgb(236, 229, 229);
        padding-bottom: 10px;

        p {
          margin: 0;
        }
        span {
          color: rgb(233, 109, 26);
        }
      }
    }
   
  }
   .btn{
      margin-top: 30px;
    }
}
</style>